<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input, .layui-textarea, .layui-unselect {
            width: 45% !important;
        }
        .layui-select-title input {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">

</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js" charset="utf-8"></script>
<script>
    function child(taskId, formData) {
        console.log(taskId, formData);

        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.$;

            renderForm(JSON.parse(formData));

            // 监听提交
            form.on('submit(saveBtn)', function (data) {
                layer.confirm('确定要提交吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (index) {
                    layer.close(index);
                    var loadIndex = layer.load(2);

                    var param = '';
                    $(".js_val").each(function () {
                        param += $(this).attr("name") + '-_!' + $(this).val() + '-_!' + $(this).attr("isParam") + '!_!'
                    });
                    var params = param.slice(0,param.length-3);
                    $.post(publicUrl + 'task/saveFormData', {
                        taskId: taskId,
                        formData: params
                    }, function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 1});
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            setTimeout(function () {
                                parent.layer.close(iframeIndex);
                            }, 1500);
                        } else {
                            layer.alert(res.msg, {icon: 2, title: '提示'});
                        }
                    }, 'json');
                });

                return false;
            });

            /**
             * 渲染动态表单
             */
            function renderForm(res) {
                for (var i = 0; i < res.length; i++) {
                    var formItem;
                    var input;
                    switch (res[i].controlType) {
                        case 'string':
                            if (res[i].controlDefValue == '无') {
                                input = '<input lay-verify="required" type="text" isParam="' + res[i].controlIsParam + '" name="' + res[i].id + '" placeholder="" value="" class="layui-input js_val">';
                            } else {
                                input = '<input lay-verify="required" type="text" isParam="' + res[i].controlIsParam + '" name="' + res[i].id + '" value="' + res[i].controlDefValue + '" placeholder="" class="layui-input js_val">';
                            }
                            break;
                        case 'long':
                            if (res[i].controlDefValue == '无') {
                                input = '<input lay-verify="required|number" type="text" isParam="' + res[i].controlIsParam + '" name="' + res[i].id + '" placeholder="" value="" class="layui-input js_val" onkeyup="this.value=this.value.replace(/\\D|^0/g,\'\')" onafterpaste="this.value=this.value.replace(/\\D|^0/g,\'\')">';
                            } else {
                                input = '<input lay-verify="required|number" type="text" isParam="' + res[i].controlIsParam + '" name="' + res[i].id + '" value="' + res[i].controlDefValue + '" class="layui-input js_val" onkeyup="this.value=this.value.replace(/\\D|^0/g,\'\')" onafterpaste="this.value=this.value.replace(/\\D|^0/g,\'\')">';
                            }
                            break;
                        case 'cUser':
                            input = '<select name="' + res[i].id + '" isParam="' + res[i].controlIsParam + '" lay-filter="aihao" id="' + res[i].id + '" type="cUser" class="js_val js_select"></select>'
                            break;
                    }
                    formItem = '<div class="layui-form-item">' +
                        '   <label class="layui-form-label required">' + res[i].controlLabel + '：</label>' +
                        '       <div class="layui-input-block">' +
                        '           ' + input +
                        '       </div>' +
                        '   </div>';
                    $(".layui-form").append(formItem);
                }
                $(".layui-form").append('<div class="layui-form-item">\n' +
                    '   <div class="layui-input-block">\n' +
                    '       <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">提交任务</button>' +
                    '   </div>' +
                    '</div>');

                $(".js_select").each(function () {
                    var id = $(this).attr("id");
                    creatSelect(id);
                });

                form.render();
            }

            /**
             * 生成下拉框
             * @param id
             */
            function creatSelect(id) {
                var loadIndex = layer.load(2);
                $.get( publicUrl + 'user/list', {}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        // $("#" + id).html("").append('<option value="">-请选择-</option>');
                        for (var key in res.data) {
                            var publicOption = '<option  value="' + res.data[key].username + '">' + res.data[key].name+ '</option>';
                            $("#" + id).append(publicOption);
                        }
                        form.render();
                    } else {
                        layer.alert(res.msg, {icon: 2, title: '提示'});
                    }
                });
            }
        });

    }
</script>
</body>
</html>